<template>
    <div class="numBox">
        <div class="content">
            <div class="one" v-for="item in Arr" :key="item.title">
                <div class="num">123</div>
                <div class="title">
                    <titleView :text="item.title" :font-size="20" :bg-image="require('../../../assets/image/组 21.png')">
                    </titleView>
                </div>
                <div class="search">
                   <div><input type="text"></div>
                   <div class="fdj"><i style="color: #ffff;" class="el-icon-search"></i></div>
                </div>
                <div class="data" >
                    <div class="dataname" v-for="(datas,index) in item.list" :key="datas" :style="index<=2? {color:' #3f8cff'}:'' " @click="goinfo(datas)">{{datas}}</div>

                </div>
            </div>

        </div>
    </div>
</template>

<script>
import titleView from '@/components/title/index.vue'
import { color } from 'echarts';
export default {
    components: { titleView },
    data() {
        return {
            // arr:['武隆组工微信公众号','愉快政'],
            Arr: [
                { title: '党建统领的整体智治', list: ['党建统领的整体智治', '党建统领的整体智治系统', '渝快政', '武隆组工微信公众号'] },
                { title: '经济调节' },
                { title: '市场监管' },
                { title: '应急管理' },
                { title: '生态保护' },
                { title: '公共服务' },
                { title: '基层智治' },
            ]
        }
    },
    methods: {
        goinfo(datas) {
            this.$router.push({ path: 'applyNumInfo', query: { datas } })
            console.log(1);
        },
    }
}
</script>

<style lang="scss" scoped>
.numBox {
    width: 100%;
    height: auto;
    background-color: #F2F8FF;
    ;
}

.content {
    width: 1860px;
    height: auto;
    margin-left: 30px;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

.one {
    margin-left: 22px;
    margin-bottom: 30px;
    position: relative;
    width: 443px;
    height: 409px;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

.title {
    margin-top: 27px;
    margin-left: 21px;
}
.num{
    position: absolute;
    top: 0px;
    right: 34px;
    width: 44px;
	height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 5px 5px 0 0;
    font-family: MicrosoftYaHei-Bold;
	font-size: 18px;
    color: #ffffff;
    font-weight: normal;
	background-color: #3f8cff;
}
.search{
    display: flex;
    width: 384px;
    height: 30px;
    margin-left: 23px;
    margin-top: 17px;
    background-color: #f2fbfd;
	border-radius: 5px;
}
input{
    width: 358px;
    height: 30px;
    border: none;
    outline: none;
    background-color:  #f2fbfd;
}
.fdj{
    background-color: #3f8cff; 
    width: 33px;
    text-align: center;
    line-height: 30px;
    border-radius: 0px 5px 5px 0px;
}
.data{
    width: 384px;
	height: 282px;
    margin-left: 22px;
    margin-top: 17px;
	background-image: linear-gradient(0deg, 
		#ffffff 0%, 
		#ebf9fc 100%), 
	linear-gradient(
		#3a72b3, 
		#3a72b3);
	background-blend-mode: normal, 
		normal;
	border-radius: 8px;
    overflow: hidden;
}
.dataname{
    width: 324px;
	height: 19px;
    margin-top: 13px;
    margin-left: 32px;
	font-family: MicrosoftYaHei;
	font-size: 18px;
    cursor: pointer;
	font-weight: normal;
	font-stretch: normal;
	color: #2b4054;
}
.names:hover {
    text-shadow: 0px 0px 10px #1890ff;
}

i {
    cursor: pointer;
}</style>